<template>
	<view :style="{'min-height':height+'px'}" style="background: #f1f1f1;">
		<!-- url+/apphome -->
	<!-- 	<iframe :src="$store.state.url + '/apphome.html'" frameborder="0" style="width: 100%;position: fixed;height: 100%;overflow: auto;">
			
		</iframe> -->
		<view class="top" style=" height:150px;background: #168dea;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;text-align: left;text-indent: 20px;">
			<view class="" style="line-height: 110px;">
				<text style="font-size: 36rpx;color: #fff;font-weight: bold;">概率社区</text>
				<image @tap="$go('/pages/center/kefu')" src="../../static/img/kff.png" style="width: 18px;height: 20px;float: right;margin-top: 88rpx;margin-right: 20px;" mode=""></image>
			</view>
		</view>
		<view class="top" :style="{display:topactive?'block':'none'}" style="position: fixed;z-index: 10; top: 0;left: 0;width: 100%; height:80px;background: #168dea;text-align: left;text-indent: 20px;">
			<view class="" style="line-height: 110px;">
				<text style="font-size: 36rpx;color: #fff;">概率社区</text>
				<image @tap="$go('/pages/center/kefu')" src="../../static/img/kff.png" style="width: 20px;height: 22px;float: right;margin-top: 80rpx;margin-right: 20px;" mode=""></image>
			</view>
		</view>
		<view class="id-nav">
			<view>
				<view v-for="i,idx in topdata" @tap="$go('/pages/index/wenzhang?url='+i.url + '&title=' + i.text)">
					<image :src="i.icon" mode="" :style="{height:idx == topdata.length-1?'22px':'21px'}"></image>
					{{i.text}}
				</view>
				<view class="" style="color: red;" v-if="!topdata.length">
					服务器错误！
				</view>
			</view>
		</view>
		<view class="splice" style="padding: 0 12px;margin-top: 15px;height: 40px;overflow: hidden;">
			<view style="background: #fff;border-radius: 8px;height: 40px;">
				<view class="gundong" style="padding: 0 10px;" :animation="animation" v-if="scrooldata.length">
					<view class="" style="position: relative;height: 40px;line-height: 40px;" v-for="i in scrooldata" @tap="$go('/pages/index/wenzhang?url='+i.url + '&title=' + i.text)">
						<text style="color:#168dea ;font-weight: bold;float: left;position: relative;display: block;">
							概率社区
							<text style="top: 50%;transform: translateY(-50%);word-wrap: break-word;white-space: nowrap; font-size: 8px;position: absolute;left: 100%; background: red;color: #fff;border-radius: 2px;margin-left: 5px; float: left;line-height: initial;display: block;height: auto;padding: 1rpx 3px;">头条</text>
						</text>
						
						<text style="display: block;float: left; width: 58%;font-size: 14px;margin-left: 45px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{i.text}}</text>
						<image src="/static/img/rights.svg" style="width: 20px;height: 20px;float: right;position: absolute;right: 0;top: 10px;" mode=""></image>
					</view>
					
					<view class="" style="position: relative;height: 40px;line-height: 40px;" @tap="$go('/pages/index/wenzhang?url='+scrooldata[0].url + '&title=' + scrooldata[0].text)">
						<text style="color:#168dea ;font-weight: bold;float: left;position: relative;display: block;">
							概率社区
							<text style="top: 50%;transform: translateY(-50%); word-wrap: break-word;white-space: nowrap; font-size: 8px;position: absolute;left: 100%; background: red;color: #fff;border-radius: 2px;margin-left: 5px; float: left;line-height: initial;display:block;height: auto;padding: 1rpx 3px;">头条</text>
						</text>
						
						<text style="display: block;float: left; width: 58%;font-size: 14px;margin-left:45px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{scrooldata[0].text}}</text>
						<image src="/static/img/rights.svg" style="width: 20px;height: 20px;float: right;position: absolute;right: 0;top: 10px;" mode=""></image>
					</view>
				</view>
				<view class="gundong" style="padding: 0 10px;" v-else>
					<view class="" style="position: relative;height: 40px;line-height: 40px;">
						<text style="color:#168dea ;font-weight: bold;float: left;color: red;">暂无头条！</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="splice" style="padding: 0 12px;margin-top: 15px;overflow: hidden;">
			<view class="" style="background: #fff;border-radius: 10px;padding: 0 10px;overflow: hidden;">
				<text style="line-height: 45px;">
					新人任务
				</text>
				<view style="margin-bottom: 10px;overflow: hidden;">
					<view v-for="i,index in contentdata"  @tap="$go('/pages/index/wenzhang?url='+i.url + '&title=' + i.text)" class="" style="background: rgb(245,245,245);font-size: 14px; border-radius: 6px;margin-bottom: 10px;width:calc(50% - 3px);float: left;position: relative;" :style="{'margin-right':index%2 == 0?'6px':0}">
						<image :src="i.icon" style="width: 16px;height: 16px;margin:0 5px;margin-right: 3px; margin-top: 12px;float: left;" mode="" ></image>
						<text style=" line-height: 40px;font-size: 13px;" :style="{color:i.fontcolor}">{{i.text}}</text>
						<text :style="{'border-color':i.fontcolor,'color':i.fontcolor}" style="font-size: 20rpx;display: block;padding:1rpx 3px;border-radius: 3px; float: right;border: 1px solid #fff;height: auto;line-height: unset;position: absolute;right: 5px;top: 50%;transform: translateY(-50%);">查看</text>
					</view>
					<text style="display: block;text-align: center;color: red;line-height: 40px;" v-if="!contentdata.length">暂无任务！</text>
				</view>
			</view>
		</view>
		<view class="splice" style="padding: 0 12px;margin-top: 15px;overflow: hidden;">
			<view class="" style="background: #fff;padding: 0 10px;overflow: hidden;">
				<text style="padding: 15px 0;font-size: 16px;text-align: center;display: block;border-bottom: 1px solid #FF5C56;">
					反向跟单 让交易变得更简单
					<text style="font-size: 13px;display: block;">让更多的亏损数据为您所用</text>
				</text>
				<view style="margin-bottom: 15px;overflow: hidden;margin-top: 10px;" class="newrow">
					<view class="" v-if="paihang.length && paihang" v-for="i in paihang[1].traderList" @tap="$go('/pages/echart/echart?obj=' + JSON.stringify(i))">
						<image :src="i.headPortrait" style="width: calc(100% - 8px);border: 1px solid #ccc;margin-left: 4px;" :style="{height:((width-22)/6 - 10)+'px' }" mode=""></image>
					</view>
					<view class="" v-if="paihang.length && paihang" v-for="i in paihang[2].traderList" @tap="$go('/pages/echart/echart?obj=' + JSON.stringify(i))">
						<image :src="i.headPortrait" style="width: calc(100% - 8px);border: 1px solid #ccc;margin-left: 4px;" :style="{height:((width-22)/6 - 10)+'px' }" mode=""></image>
					</view>
					<!-- <view class="">
						<image src="../../static/img/images/qq_03.png" style="width: calc(100% - 8px);border: 1px solid #ccc;margin-left: 4px;" :style="{height:((width-22)/6 - 10)+'px' }" mode=""></image>
					</view>
					<view class="">
						<image src="../../static/img/images/qq_03.png" style="width: calc(100% - 8px);border: 1px solid #ccc;margin-left: 4px;" :style="{height:((width-22)/6 - 10)+'px' }" mode=""></image>
					</view>
					<view class="">
						<image src="../../static/img/images/qq_03.png" style="width: calc(100% - 8px);border: 1px solid #ccc;margin-left: 4px;" :style="{height:((width-22)/6 - 10)+'px' }" mode=""></image>
					</view>
					<view class="">
						<image src="../../static/img/images/qq_03.png" style="width: calc(100% - 8px);border: 1px solid #ccc;margin-left: 4px;" :style="{height:((width-22)/6 - 10)+'px' }" mode=""></image>
					</view> -->
				</view>
				<view class="" v-if="paihang.length && paihang" style="padding: 0 5px;overflow: hidden;margin-bottom: 30px;">
					<text @tap="$go('/pages/paihang/so')" style="float: right;color: #168dea;margin-top: 7px;font-size: 15px;font-weight: 550;">更多</text>
					<text style="font-weight: bold;color: green;display: block;float: left;font-size: 18px;">
						{{paihang[1].traderList[0].profit.toFixed(0)}}
					</text>
					<text style="font-size: 13px;display: block;clear: left;">反向跟单总盈利</text>
					
				</view>
				<text style="display: block;text-align: center;color: red;line-height: 40px;padding-bottom: 50px;" v-else>暂无推荐信息！</text>
			</view>
		</view>
		<view class="" style="position: fixed;z-index: 100;background: #fff;top: 0;left: 0;width: 100%;height: 100%;" :style="{display:show?'block':'none'}">
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			height:0,
			animation:{},
			Y:0,
			width:0,
			Time:{},
			topdata:[],
			scrooldata:[],
			contentdata:[],
			paihang:[],
			topactive:false
		};
	},
	onPageScroll: function(Object) {
		var sctop = Object.scrollTop;
		if(sctop>0){
			this.topactive = true;
		}else{
			this.topactive = false;
		}
	},
	methods: {
		go(url){
			uni.switchTab({
				url:url
			})
		},
		getdata() {
			var _this = this;
			this.setami();
			uni.request({
				method: 'post',
				url: _this.$store.state.url + '/api/apphome/topmenu',
				success: function(data) {
					data = data.data;
					if (data.code == 200) {
						_this.topdata = data.data;
						// console.log(data.data)
					} else {
						// alert(data.msg)
					}
				}
			});
			uni.request({
				method: 'post',
				url: _this.$store.state.url + '/api/apphome/banner',
				success: function(data) {
					data = data.data;
					if (data.code == 200) {
						_this.scrooldata = data.data;
					} else {
						// alert(data.msg)
					}
				}
			});
			uni.request({
				method: 'post',
				url: _this.$store.state.url + '/api/apphome/newjob',
				success: function(data) {
					data = data.data;
					if (data.code == 200) {
						_this.contentdata = data.data;
					} else {
						// alert(data.msg)
					}
				}
			});
			uni.request({
				method: 'get',
				url: _this.$store.state.user
					? _this.$store.state.url1 + '/api/GWDataShow/GetHomeRankingList?token=' + _this.$store.state.user.token
					: _this.$store.state.url1 + '/api/GWDataShow/GetHomeRankingList',
				// contentType: "application/json;",
				// data:json,
				// data: json,
				success: function(data) {
					// console.log(data,'交易此仓列表')
					data = data.data;
					// console.log(data)
					if (data.code == 200) {
						_this.paihang = data.data;
					} else {
					}
				}
			});
		},
		setami(){
			var _this = this;
			this.Time = setInterval(function(){
				_this.ami();
			},3000);
			
		},
		ami(){
			var t = 500,_this = this;
			this.Y = this.Y - 40;
			var animations = uni.createAnimation({
				duration: t,
			    timingFunction: 'ease',
			});
			animations.translateY(this.Y).step();
			this.animation = animations.export();
			setTimeout(function(){
				if(_this.Y <= -40 * _this.scrooldata.length){
					// console.log(123)
					animations = uni.createAnimation({
						duration: 0,
					    timingFunction: 'ease',
					});
					animations.translateY(0).step();
					_this.animation = animations.export();
					_this.Y = 0;
				}
			},500)
			
		}
	},
	onHide() {
		var animations = uni.createAnimation({
			duration: 0,
		    timingFunction: 'ease',
		});
		animations.translateY(0).step();
		this.animation = animations.export()
		clearInterval(this.Time);
		this.Y = 0;
	},
	onShow() {
		var _this = this;
		setTimeout(function(){
			_this.show = false;
		},800)
		// #ifdef APP-PLUS
		// App平台检测升级，服务端代码是通过uniCloud的云函数实现的，详情可参考：https://ext.dcloud.net.cn/plugin?id=2226
		// console.log(plus.runtime.appid,plus.runtime.version,plus.device.imei)
		
		if (plus.runtime.appid !== 'HBuilder') { // 真机运行不需要检查更新，真机运行时appid固定为'HBuilder'，这是调试基座的appid
			// console.log(plus.runtime.appid,plus.runtime.version,plus.device.imei)
			// console.log(_this.$store.state.url +'/api/update')
		
		
			uni.request({
				url: _this.$store.state.url + '/api/update', //检查更新的服务器地址
				method: 'POST',
				data: {
					appid: plus.runtime.appid,
					version: plus.runtime.version,
					imei: plus.device.imei
				},
				success: (res) => {
					res = res.data;
					console.log(res)
					if (res.statusCode == 200 && res.data.isUpdate) {
						// 提醒用户更新
						uni.showModal({
							title: '更新提示',
							content: res.data.note ? res.data.note : '是否选择更新',
							success: (ee) => {
								if (ee.confirm) {
									// plus.runtime.openURL(res.data.url);
									var dtask = plus.downloader.createDownload(res.data.url, {}, function(d, status) {
										// 下载完成  
										if (status == 200) {
											plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(error) {
												uni.showToast({
													title: '安装失败',
													mask: false,
													duration: 1500
												});
											})
										} else {
											uni.showToast({
												title: '更新失败',
												mask: false,
												duration: 1500
											});
										}
									});
									dtask.start();
								}
							}
						})
					}
				},
				fail: (res) => {
					console.log(res)
		
				}
			})
		}
		// #endif
		
		
		
		uni.getNetworkType({
			success: function(res) {
				if (res.networkType == 'none') {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 5000

						// position:'top'
					});
				}
			}
		});
		uni.onNetworkStatusChange(function(res) {
			if (!res.isConnected) {
				uni.showToast({
					title: '当前无网络连接，请检查！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
			} else {
				uni.showToast({
					title: '网络已连接！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
				_this.getdata();
			}
		});
		this.height = uni.getSystemInfoSync().windowHeight;
		this.width = uni.getSystemInfoSync().windowWidth;
		_this.getdata();
	}
};
</script>
<style scoped>
	.id-nav{
		padding:0 12px;
		margin-top: -55px;
		
	}
	.id-nav >uni-view{
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		padding: 15px 0;
		background: #fff;
	}
	.id-nav >uni-view >*{
		flex: 1;
		text-align: center;
		font-size: 14px;
	}
	.id-nav >uni-view >* uni-image{
		margin: 0 auto;
		width: 20px;
		height: 21px;
		display: block;
		margin-bottom: 8px;
	}
	.newrow{
		display: flex;
		flex-direction: row;
	}
	.newrow>*{
		flex: 1;
	}
</style>
